<template>
  <div class="box">
    <div class="sidebar-left">
      <div class="sidebar-left-avatar">
        <div>
          <el-avatar :size="50"/></div>
        <span>工程项目管理平台</span>
      </div>
        <el-menu  class="el-menu-demo" @select="handleSelect" :router="true">
          <el-menu-item v-for="(item, index) in obj" :key="index" :index="item.path" :route="{path:item.path}" :class="{ 'is-active': activeIndex === item.path }">
            <el-icon size="20px" >
              <component :is="item.icon"></component>
            </el-icon>
            <span>{{ item.text }}</span>
          </el-menu-item>
        </el-menu>
      <!-- <ul ></ul> -->
    </div>
    <!-- <div class="sidebar-right">
      <div class="top">
        <el-button type="primary">主要按钮</el-button>
        右侧上方
      </div> "
      <div class="bottom">
        右侧下方
      </div>
    </div> -->
    <div class="sidebar-right">
      <RouterView></RouterView>
    </div>
  </div>
</template>
<!-- @open="handleOpen" @close="handleClose" -->
<script setup>
import { ElButton, ElIcon, ElMenu } from 'element-plus'
import { ref ,watch} from 'vue'
import { useRoute,useRouter,RouterView } from 'vue-router'
const router=useRouter();
const route =useRoute()
const obj = [
  {
    icon: 'House',
    text: '首页',
    path:'/'
  },
  {
    icon: 'Document',
    text: '项目管理',
    path:'/ProjectMange'
  },
  {
    icon: 'CollectionTag',
    text: '方案预算管理',
    path:'/Budget'
  },
  {
    icon: 'Notebook',
    text: '合署管理',
    path:'/Book'
  },
  {
    icon: 'Goods',
    text: '材料采购管理',
    path:'/MaterialBuy'
  },
  {
    icon: 'Suitcase',
    text: '工程医工管理',
    path:'/ProjHospital'
  },
  {
    icon: 'Money',
    text: '回款管理',
    path:'/Money'
  },
  {
    icon: 'Memo',
    text: '起源根本',
    path:'/Original'
  },
  {
    icon: 'FolderRemove',
    text: '四字管理',
    path:'/FinnalProj'
  }
]
const activeIndex = ref(route.path)
// 监听路由变化，动态更新 activeIndex
const handleSelect = (index) => {
 
  activeIndex.value=index
   console.log(activeIndex.value);
}


</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}

.box {
  width: 100vw;
  height: 100vh;
  display: flex;
}

.sidebar-left {
  width: 25%;
  height: 100%;
  background-color: grey;
}
.sidebar-left-avatar{
  display: flex;
  align-items: center;
    justify-content: center;
}
span.el-avatar.el-avatar--circle{
  margin: 6px;
}
span{
  color:white;
}
.el-menu-item{
  background-color: rgb(56, 55, 55);
  color: white;
}
.el-menu-item.is-active {
  background-color: #409eff !important; /* 背景颜色 */
  color: #ffffff !important; /* 字体颜色 */
}
.el-menu-demo :hover{
  background-color: #409eff;
}
/* .sidebar-left li{
 list-style-type: none;
  background-color: white;
  height: 60px;
  margin: 10px;
 line-height: 60px;

} */
.sidebar-right {
  width: 75%;
  height: 100%;
}

.sidebar-right>.top {
  height: 50%;
  background-color: pink;
}

.sidebar-right>.bottom {
  height: 50%;
  background-color: red;
}
</style>